/**
 * 直播数据工具栏
 */
import { StyleProvider } from "@ant-design/cssinjs"
import { DoubleRightOutlined, FormOutlined } from "@ant-design/icons"
import { Button, Flex } from "antd"
import cssText from "data-text:~/assets/css/data_screen.css"
import antdResetCssText from "data-text:antd/dist/reset.css"
import type { PlasmoCSConfig, PlasmoGetShadowHostId } from "plasmo"
import React, { useEffect, useState } from "react"

import { usePort } from "@plasmohq/messaging/hook"
import { useStorage } from "@plasmohq/storage/dist/hook"

import { ThemeProvider } from "~theme"

// 注入配置
export const config: PlasmoCSConfig = {
  matches: [
    // 抖音直播数据大屏(专业版)
    "https://compass.jinritemai.com/screen/live/*",
    // 淘宝直播数据大屏(专业版)
    "https://market.m.taobao.com/app/mtb/live-professional-screen/*",
    // 快手直播数据大屏(专业版)
    "https://zs.kwaixiaodian.com/realtime/operating/systemMain*",
    // 快手直播数据大屏(专业新版 2024/09/20)
    "https://zs.kwaixiaodian.com/realtime/operating/zones/dataScreen/main*",
    // 微信视频号直播数据大屏(专业版)
    "https://channels.weixin.qq.com/platform/statistic/dashboardV4*"
  ],
  run_at: "document_end",
  all_frames: true
}

// 注入的shadow dom的id
export const HOST_ID = "data-record-toolbar"
export const getShadowHostId: PlasmoGetShadowHostId = () => HOST_ID

// 注入的位置配置
// 默认overlay

// 注入样式
export const getStyle = () => {
  const style = document.createElement("style")
  style.textContent = cssText + antdResetCssText
  return style
}

// 组件定义
const DataRecorderToolbar: React.FC = () => {
  // 数据记录弹窗显示状态通信port
  const visiblePort = usePort("recordModalVisible")
  // 用户是否登录
  const [userLogin] = useStorage("isLogin", false)
  // 是否显示工具栏
  const [showTools, setShowTools] = useState(true)
  // 显示开关
  const toggleShowTools = () => {
    setShowTools(!showTools)
  }
  // 处理数据记录弹窗打开
  const handleOpen = async () => {
    if (userLogin) {
      // 用户已登录打开数据录入窗口
      visiblePort.send({
        visible: true
      })
    }
  }
  // 监控用户登录状态
  useEffect(() => {
    // 如果用户登出则关闭数据录入窗口
    if (!userLogin) {
      visiblePort.send({
        visible: false
      })
    }
  }, [userLogin])
  return (
    <ThemeProvider>
      <StyleProvider container={document.getElementById(HOST_ID).shadowRoot}>
        <div className={"record-container"} style={{ width: 250 }}>
          <div className={"record-title"} onClick={toggleShowTools}>
            大G助手工具栏
          </div>
          <div
            className={"record-content"}
            style={{ height: 80, display: showTools ? "block" : "none" }}>
            {userLogin ? (
              <div className={"record-main"}>
                <Flex gap="middle" justify={"center"}>
                  <Button
                    type={"text"}
                    style={{ color: "#78d8e7" }}
                    icon={<FormOutlined />}
                    onClick={handleOpen}>
                    直播数据记录
                  </Button>
                </Flex>
              </div>
            ) : (
              <div className={"record-login-tips"}>
                点击插件图标进行扫码登录
              </div>
            )}
          </div>
          <div className={"bottom-control"}>
            <Button
              type={"text"}
              size={"small"}
              icon={
                <DoubleRightOutlined
                  style={{
                    transform: showTools ? "rotate(270deg)" : "rotate(90deg)"
                  }}
                />
              }
              style={{
                color: "white",
                padding: 0,
                height: "15px",
                lineHeight: "15px"
              }}
              onClick={toggleShowTools}></Button>
          </div>
        </div>
      </StyleProvider>
    </ThemeProvider>
  )
}

export default DataRecorderToolbar
